<html>
  <head>
    <title>Particles</title>
    <script type="text/javascript" src="/js/particle.js"></script>
  </head>
  <body>
<script type="text/javascript" language="javascript">
      // Canvas creation and setup
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var particles = [];
      var pause = false;

      document.body.appendChild(canvas);

      canvas.width = 400;
      canvas.height = 400;
      //ctx.fillRect(0,0,400,400);
      

      addParticles = function(n){
        for (var i=0; i < n; i++){
            var p = new Particle();
            p.init(canvas);
            particles.push(p);
        }
      }

      removeParticles = function(){
        var n = particles.length;
        for (var i=0; i < n; i++) particles.pop();
      }

      loop = function(){
          if (pause) return;
          ctx.clearRect(0,0,canvas.width, canvas.height);
          for(var i=0; i<particles.length;i++) particles[i].update();
          for(var i=0; i<particles.length;i++) particles[i].draw();
      }

      loopDelegate = function(){
          loop();
      }

      var timer = setInterval(loopDelegate, 1000 / 60);

      addParticles(10);

</script>
  </body>
</html>
